<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model.trim="query.settingName" clearable placeholder="过滤名称" />

      <el-button type="primary" icon="el-icon-search" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button type="primary" icon="el-icon-edit" @click="handleAdd">
        {{ $t('table.add') }}
      </el-button>
    </div>

    <el-table :data="table.slice((currentPage - 1) * pagesize, currentPage * pagesize)" highlight-current-row
      :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border>
      <el-table-column prop="settingName" label="配置名称" sortable />
      <el-table-column prop="settingResult" label="配置数据" sortable />
      <el-table-column prop="settingSort" label="类别" sortable />
      <el-table-column label="创建时间">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间">
        <template slot-scope="{row}">
          <span>{{ row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="380px">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleEdit(row)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:20px;" :current-page="currentPage" :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" @pagination="getMenuList" />
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%"
      :title="menu.id ? '编辑' : '新建'">
      <el-form ref="ruleForm" :model="menu" :rules="rules" label-width="80px" label-position="left">
        <el-form-item label="过滤名称" prop="settingName">
          <el-input v-model.trim="menu.settingName" placeholder="过滤名称" :disabled="menu.id ? true : false" />
        </el-form-item>
        <el-form-item label="过滤数据" prop="settingResult">
          <el-input v-model.trim="menu.settingResult" type="textarea" :rows="3" placeholder="过滤数据" />
        </el-form-item>
        <el-form-item label="类别" prop="settingSort ">
          <el-input v-model.trim="menu.settingSort" type="text" max-length="15" placeholder="类别" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible = false">
          {{ $t('permission.cancel') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ $t('permission.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllInfo, deleteInfo, add, getMenu, addMenu, updateMenu, removeMenu } from '@/api/systemFiltration'
import { getList as getUserList } from '@/api/user'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { deepClone, arraryRemove } from '../../../utils'

const _formData = {
  id: 0,
  settingName: '',
  settingResult: ''

}

export default {
  name: 'MopGroup',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      query: {
        settingName: ''
      },
      currentPage: 1,
      pagesize: 10,
      rules: {
        settingName: [
          { required: true, message: '请输入过滤名称', trigger: 'blur' },
          { min: 1, max: 15, message: '字符长度不超过15位', trigger: 'change' }
        ],
        settingResult: [
          { required: true, message: '请输入过滤数据', trigger: 'blur' }, ,
          { min: 1, max: 200, message: '字符长度不超过200位', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      menu: Object.assign({}, _formData),
      table: [],
      total:0
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    handleSizeChange (size) {
      this.pagesize = size
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    },
    search() {
      this.currentPage = 1
      this.getMenuList()
    },
    handleDelete(row, $index) {
      this.$confirm('确认删除?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteInfo(row.id)
        this.table.splice($index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(err => console.error(err))
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.menu = deepClone(row)
    },
    async submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          add(this.menu).then((res) => {
            this.getMenuList()
            this.dialogVisible = false
            this.$message.success('提交成功')
          })
        }
      })
    },
    handleAdd() {
      this.menu = Object.assign({}, _formData)
      this.dialogVisible = true
    },
    async getMenuList () {
      const {list,total} = await getAllInfo(this.query)
      this.table = list
      this.total = total
    }
  }
}
</script>
